Giter Club home page Giter Club logo

Comments (7)

chuckdumont avatar chuckdumont commented on September 18, 2024

@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.

anitschke avatar anitschke commented on September 18, 2024

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.

chuckdumont avatar chuckdumont commented on September 18, 2024

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.

anitschke avatar anitschke commented on September 18, 2024

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.

chuckdumont avatar chuckdumont commented on September 18, 2024

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.

anitschke avatar anitschke commented on September 18, 2024

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.

chuckdumont avatar chuckdumont commented on September 18, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.