Comments (7)
@anitschke - is your source code explicitly specifying dojo/text when loading myfile.json (e.g. 'dojo/text!myfile.json')? If so, then I would expect the behavior you describe and your solution seems like the right one.
from dojo-webpack-plugin.
Yes, it is doing dojo/text!myfile.json
. That being said I jumped the gun on creating this issue a little. The above replace gets the build to work but when I try to test it out I am noticing that I am still having some issues. Webpack is loading it as an JS object and not a string, resulting in JSON.parse
erroring out. Still trying to figure out this piece of the puzzle.
from dojo-webpack-plugin.
By default, webpack uses json-loader to load json files. Sounds like you need them loaded as test. Just define a loader to do this in your weback-config.
module.exports = {
module: {
loaders: [
{
test: /\.json$/,
loader: 'raw-loader'
}
]
}
}
from dojo-webpack-plugin.
I gave that a try but I get errors during the build regarding not being able to find the package.json file, so I added a negative look behind assertion to the test so it won't match the package.json. This fixed the build issue but still seeing the JSON files load as objects and not strings.
I also saw some mention in https://webpack.js.org/configuration/module/#ruletype that you need type: "javascript/auto"
when loading JSON but, that doesn't seem to help either.
What I have right now:
module: {
rules: [
{
test: /(?<!package)\.json$/,
type: "javascript/auto",
use: 'raw-loader'
},
],
},
Full error without the negative look behind assertion:
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'package/node_modules/raw-loader/dist/cjs.js!/package/dependencies/dojo/package.json'
Require stack:
- package/node_modules/dojo-webpack-plugin/lib/DojoLoaderValidatorPlugin.js
- package/node_modules/dojo-webpack-plugin/lib/DojoAMDPlugin.js
- package/node_modules/dojo-webpack-plugin/index.js
- package/webpack.common.js
- package/webpack.test.js
- package/node_modules/webpack-cli/lib/webpack-cli.js
- package/node_modules/webpack-cli/lib/bootstrap.js
- package/node_modules/webpack-cli/bin/cli.js
- package/node_modules/webpack/bin/webpack.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at package/node_modules/dojo-webpack-plugin/lib/DojoLoaderValidatorPlugin.js:43:18
at package/node_modules/webpack/lib/NormalModuleFactory.js:814:5
at eval (eval at create (package/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
at package/node_modules/webpack/lib/NormalModuleFactory.js:320:16
at Hook.eval [as callAsync] (eval at create (package/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at package/node_modules/webpack/lib/NormalModuleFactory.js:300:31 {
code: 'MODULE_NOT_FOUND',
requireStack: [
'package/node_modules/dojo-webpack-plugin/lib/DojoLoaderValidatorPlugin.js',
'package/node_modules/dojo-webpack-plugin/lib/DojoAMDPlugin.js',
'package/node_modules/dojo-webpack-plugin/index.js',
'package/webpack.common.js',
'package/webpack.test.js',
'package/node_modules/webpack-cli/lib/webpack-cli.js',
'package/node_modules/webpack-cli/lib/bootstrap.js',
'package/node_modules/webpack-cli/bin/cli.js',
'package/node_modules/webpack/bin/webpack.js'
]
from dojo-webpack-plugin.
I think that a safer solution than omitting package.json from the rule would be to only include your application's json files:
test: /myapp\/.*\.json$/
from dojo-webpack-plugin.
What I finally ended up with is essentially the following:
module.exports = {
entry: "project/index.js",
plugins: [
new DojoWebpackPlugin({
loader: path.join( 'dojo-loader', 'dojo', 'dojo.js'),
loaderConfig: {
async: true,
baseUrl: path.join(project, 'dependencies'),
packages: [
{ name: 'dojo', location: 'dojo', lib: '.' },
]
},
}),
// Note on handling JSON files
//
// webpack handles load of JSON files on it's own and trying to use the
// raw-loader provided by default by the dojo webpack plugin causes
// issues. So we need to just rip the loader part out entirely so that
// webpack can just handle it on it's own.
//
// Of course there is also an issue where webpack will try to load these
// json files as js objects. Which causes our code to error out when we
// call JSON.parse on the object. So to force webpack to load these as a
// JSON string we need to specify the module rule to force it to use the
// raw-loader with the esModule option set to false (I don't entirely
// understand why we need the esModule false setting. We don't need that
// for other file types like svg, but if we leave it out then we end up
// getting a module object instead of a JSON string.). Ideally we would
// be able to set the loader within the NormalModuleReplacementPlugin by
// just specifying '!!raw-loader?{"esModule":false}!' but for some
// reason it isn't picking up the esModule option for me when I do that.
//
new Webpack.NormalModuleReplacementPlugin(/^dojo\/text!/, function(data) {
data.request = data.request.replace(/^dojo\/text!(.*\.json)$/, '$1');
}),
],
module: {
rules: [
{
// See note above regarding JSON files
test: /(?<!package)\.json$/,
type: "javascript/auto",
use: {
loader: 'raw-loader',
options: {
esModule: false,
},
},
},
],
},
};
@chuckdumont I think you are right that ideally I would just write a rule to be only my application's json files, I'll look into tweaking that.
So it seems that this is not as simple of a fix as I thought and dojo-webpack-plugin probably can't provide something to just make this work out of the box, so I am going to close this issue.
from dojo-webpack-plugin.
Thanks @anitschke. I don't understand the esModule option either, but hopefully others will find this post helpful.
from dojo-webpack-plugin.
Related Issues (20)
- Incompatibility with Html-webpack-plugin >=4 HOT 8
- Cannot read property 'registerAbsMids' of undefined HOT 3
- Export a dojo-based bundle as a library HOT 15
- Using typescript for i18n
- Webpack 5 support HOT 6
- Documentation for Dojo-On-Dojo Plugins
- Dojo layer file doesn't show the content HOT 2
- Splitting applications into multiple bundles HOT 5
- webpack-hasjs-plugin does not appear to work with 3.0.0-rc1 HOT 4
- dojo/has missing after update to 3.0.0 HOT 6
- SyntaxError: Unexpected token '.' after upgrading to Webpack 5 HOT 1
- dojo.js:56 [HMR] Update check failed: Error: __webpack_require__.dj name collision. HOT 3
- Only running karma test, [email protected] DojoAMDMainTemplate.runtime.js::resolveTernaryHasExpression() throws "Module not found: dojo/has" error HOT 10
- Mac webpack build error using [email protected] DojoAMDResolverPlugin.js HOT 2
- Location is undefined HOT 8
- Cannot read property 'getChunkModules' of undefined HOT 17
- Performance optimization: Add option to skip exporting module-name to webpack-id mappings for non-AMD modules HOT 1
- Error in DojoAMDRuntimeModule.generate() when used with MonacoEditorWebpackPlugin
- Tapable peer dependency HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dojo-webpack-plugin.